<template>
  <div>
    <!-- <header-vue /> -->
    <router-view />
    <!-- 右侧导航 -->
    <div class="common_sidebar">
      <el-col style="width: 5px height:100vh" :span="12">
        <el-menu
          class="el-menu-vertical-demo"
          background-color="#333"
          text-color="#fff"
          active-text-color="none"
        >
          <el-menu-item index="1">
            <i class="iconfont">&#xe625;</i>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="iconfont">&#xe94f;</i>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="iconfont">&#xe608;</i>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="iconfont">&#xe856;</i>
          </el-menu-item>
          <el-menu-item index="5">
            <i class="iconfont">&#xe61a;</i>
          </el-menu-item>
          <el-menu-item index="6">
            <i class="iconfont">&#xe897;</i>
          </el-menu-item>
          <el-menu-item index="7">
            <i class="iconfont">&#xe674;</i>
          </el-menu-item>
          <el-menu-item index="8">
            <i class="iconfont">&#xe633;</i>
          </el-menu-item>
        </el-menu>
      </el-col>
    </div>
    <!-- <footer-vue /> -->
  </div>
</template>

<script>
import HeaderVue from "@/components/HeaderVue.vue";
import FooterVue from "@/components/FooterVue.vue";
export default {
  components: { HeaderVue, FooterVue },
};
</script>

<style lang="scss" scoped>
.common_sidebar {
  padding-top: 200px;
  z-index: 99;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  background: #333;
  i {
    font-size: 30px;
    &:hover {
      color: #cc6633;
    }
  }
}
</style>
